﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Divs</title>    
</head>
<body>
    <input type="text" id="divQuantity" /><input type="button" id="createDivs" value="Create divs" onclick="createDivs()" />
    <div id="content"></div>

    <script>
        
        function createDivs() {
            var quantity = document.getElementById("divQuantity").value;
            
            var fragment = divFactory(quantity);

            var contentDiv = document.getElementById("content");
            contentDiv.appendChild(fragment);
        }

        function generateColor() {
            var red = Math.floor((Math.random() * 255) + 1);
            var green = Math.floor((Math.random() * 255) + 1);
            var blue = Math.floor((Math.random() * 255) + 1);

            return "rgb(" + red + "," + green + "," +blue + ")";
        }

        function divFactory(quanti){
            var quantity = parseInt(quanti);
            var fragment = document.createDocumentFragment();

            for (var i = 0; i < quantity; i++) {
                var newDiv = document.createElement("div");
                // position
                newDiv.style.position = "absolute";
                newDiv.style.left = Math.floor((Math.random() * 1300) + 1) + "px";
                newDiv.style.top = Math.floor((Math.random() * 800) + 1) + "px";
                // color
                newDiv.style.backgroundColor = generateColor();
                // dimensions
                newDiv.style.width = Math.random() * (100 - 20) + 20;
                newDiv.style.height = Math.random() * (100 - 20) + 20;
                // font color
                newDiv.style.color = generateColor();
                // strong font
                var strongTag = document.createElement("strong");
                strongTag.innerText = "div";
                newDiv.appendChild(strongTag);
                // border
                newDiv.style.borderStyle = "solid";
                newDiv.style.borderWidth = Math.floor((Math.random() * 20) + 1) + "px";
                newDiv.style.borderColor = generateColor();
                newDiv.style.borderRadius = Math.floor((Math.random() * 50) + 1) + "px";
                fragment.appendChild(newDiv);
            }

            return fragment;
        }
    </script>
</body>
</html>
